<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品销量表格</title>
    <style>

        caption,thead,tfoot{
            font-weight: bold;
        }

        table {
            border-collapse: collapse;
        }
        td, th {
            border: 3px solid #ff56b1;
            text-align: center;
        }

        .notCenter{
            text-align: left;
        }

        .bgc{
            background-color: #cadefd;
        }



    </style>
</head>

<body>


        <table >
            <caption>产品月销量</caption>
            <thead>

                <tr>
                    <td>ID</td>
                    <td>产品名称</td>
                    <td>销量</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2021090901</td>
                    <td>马克杯</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>2021090901</td>
                    <td>啤酒杯</td>
                    <td>5200</td>
                </tr>
                <tr>
                    <td>2021090901</td>
                    <td>搪瓷杯</td>
                    <td>3500</td>
                </tr>
            <tfoot class="bgc">
                <tr>
                    <td colspan="2" class="notCenter">合计</td>
                    <td>13700</td>
                </tr>
            </tfoot>

            </tbody>
        </table>
</body>
</html>

